<template>
  <div class="heatmap-charts-components">
    <div class="heatmap-charts-wrapper">
      <chart :options="options"
             :init-options="initOptions"
             :theme="theme"
             auto-resize
             class="echarts-item">
      </chart>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/component/visualMap'
// import 'echarts/lib/component/grid'
import 'echarts/lib/chart/map'
import options from './echartsOptions.js'

export default {
  name: 'heatmap-charts-components',
  components: {
    chart: ECharts
  },
  data () {
    return {
      options,
      theme: 'dark',
      initOptions: {
        renderer: 'canvas'
      }
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
  // scoped
  .heatmap-charts-components {
    background-image: url(./bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 100%;
    .heatmap-charts-wrapper {
      height: 100%;
      .echarts-item {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    }
  }
</style>
